<template>
  <div class='container'>
    <el-card class="box-card">
      <div class="clearfix">
        <el-form :inline="true" label-width="80px" size="mini" ref="form" :model="form">
          <!-- 关键字输入框 -->
          <el-form-item label="关键字" prop="keyword">
            <el-input style="width: 240px" v-model="form.keyword" placeholder="根据编号搜索"></el-input>
          </el-form-item>
          <!-- 按钮 -->
          <el-button style="float: right; padding: 2px 0" type="text">
            <el-row>
              <el-button size="mini" @click="hResetForm">清除</el-button>
              <el-button type="primary" size="mini" @click="hSearch" :loading="isLoading">搜索</el-button>
            </el-row>
          </el-button>
          <!-- 数据记录 -->
          <el-alert
            :title="'数据一共'+ counts +'条'"
            style="margin-bottom:20px"
            :closable="false"
            type="info"
            show-icon>
          </el-alert>
        </el-form>
        <!-- 数据列表 -->
        <!-- element-loading-text:显示在加载图标下方的加载文案 -->
        <el-table
          :data="dataList"
          v-loading="isLoading"
          element-loading-text="给我一点时间"
          highlight-current-row
          style="width: 100%"
          fit
        >
          <el-table-column label="编号" width="220">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column label="题型" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType==='1'">单选</span>
              <span v-else-if="scope.row.questionType==='2'">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column label="题目编号" width="220">
            <template slot-scope="scope">
              <el-link :underline="false"
                type="primary"
                v-for="(value,ind) in scope.row.questionIDs"
                :key="ind"
                @click="hTitlePreview(value.id)">
                {{value.number}}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="180" prop="addTime"/>
          <el-table-column label="答题时间(s)" prop="totalSeconds"/>
          <el-table-column label="正确率(%)"  prop="accuracyRate"/>
          <el-table-column label="录入人" align="center" prop="userName"/>
          <el-table-column
            align="center"
            label="操作"
            class-name="small-padding fixed-width">
            <!-- 删除按钮 -->
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="hDel(scope.row.id)"
                plain
                circle>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :disabled="isLoading"
            :current-page="page"
            :page-sizes="[20, 30, 50, 100]"
            layout="prev, pager, next, sizes, jumper"
            :total="counts">
          </el-pagination>
        </div>
        <!-- end -->
      </div>
    </el-card>

    <!-- 预览弹层 -->
    <el-dialog
      title="题目预览"
      :visible.sync="isShowDialog"
      :before-close="headDown"
      width="40%">
      <questions-preview v-if="isShowDialog" :sid='id' @hClick="isShowDialog = false" :svideo='video'></questions-preview>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  name: 'randoms',
  components: {
    QuestionsPreview
  },
  data () {
    return {
      video: false,
      id: '',
      counts: 0, // 总数据
      dataList: [], // 数据列表
      page: 1, // 当前页数
      pagesize: 20, // 尺寸页
      isLoading: false,
      form: {
        keyword: null // 关键字
      },
      isShowDialog: false // 弹层
    }
  },
  created () {
    this.randomsFn()
  },
  methods: {
    buildParams () {
      const paramsObj = {
        page: this.page,
        pagesize: this.pagesize,
        keyword: this.form.keyword
      }
      return paramsObj
    },
    // 获取组题列表数据
    randomsFn () {
      // async写法
      const paramsObj = this.buildParams()
      this.isLoading = true
      randoms(paramsObj).then(res => {
        console.log(res.data)
        // 更新数据
        this.dataList = res.data.items
        this.counts = res.data.counts
        this.isLoading = false
      }).catch(err => {
        console.log(err)
        // 查询出错清空数据
        this.dataList = []
        this.counts = 0
        this.isLoading = false
      })
    },
    // 发送删除的请求 获取数据
    async doDel (id) {
      await removeRandoms({ id })
      try {
        this.$message.success('删除成功!')
        // 重新获取数据
        this.randomsFn()
      } catch (err) {
        this.$message.error('删除失败!')
      }
    },
    // 点击删除
    hDel (userId) {
      // 点击删除后弹窗 询问用户要不要删除
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确定后 发送axios请求
        this.doDel(userId)
      }).catch(() => {
        this.$message.info('取消成功!')
      })
    },
    // 改变条数
    handleSizeChange (pagesize) {
      // 传进来的参数是当前的页码条数 点击改变条数时把点前的页码条数赋给pagesize
      this.pagesize = pagesize
      // 切换后把page强制改为1
      this.page = 1
      // 重新获取数据
      this.randomsFn()
    },
    // 点击分页
    handleCurrentChange (curPage) {
      this.page = curPage
      // 重新获取数据
      this.randomsFn()
    },
    // 点击清除 清除表单里面的内容
    hResetForm () {
      // resetFields() 这个方法是element的方法 可以清空表单里面的内容
      this.$refs.form.resetFields()
    },
    // 点击搜索
    hSearch (keyword) {
      // 点击搜索时回到第一页
      this.page = 1
      // 更新列表
      this.randomsFn()
    },
    // 点击题目编号时
    hTitlePreview (id) {
      // 点击编号显示弹层
      this.id = id
      this.isShowDialog = true
    },
    // 当点击X号时
    headDown () {
      this.video = false
      this.isShowDialog = false
    }
  }
}
</script>

<style scoped lang='css'>
.box-card {
  margin: 10px 20px 10px 10px;
}
.block {
  margin-top: 10px;
  float: right;
}
.box {
  margin-bottom: 10px;
}
.video {
  padding-top: 20px;
}
</style>
